<template>
  <div class="song-list">
    <div class="song-bcg">
      <div class="bac-bur" :style="{backgroundImage: 'url(' + coverImgUrl + ')' }"></div>
      <div class="bu-kong" :style="{backgroundImage: 'url(' + coverImgUrl + ')' }"></div>
    </div>

    <div class="song-header">
      <div class="back" @click="goBack">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-fanhui01" />
        </svg>
      </div>
      <div class="song-title">歌单</div>
      <div class="song-edit">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-gengduoxiao" />
        </svg>
      </div>
    </div>

    <div class="song-info">
      <div class="song-dic">
        <div class="song-img">
          <img v-lazy="coverImgUrl" alt="">
        </div>
        <div class="info-desc">
          <div class="song-name"><span>{{ name }}</span></div>
          <div class="desc">
            <span>歌手:{{ singername }}</span>
          </div>
          <div class="public-time">
            <span>发行时间:{{ publictime | formatDate }}</span>
          </div>
          <div class="description">
            <span>{{ description }}</span>
          </div>
        </div>
      </div>
    </div>

    <the-icon textColor="#ffffff" iconColor="#ffffff" fontSize="12px" :data="songListIcon"></the-icon>

    <div class="item-top">
      <div class="item-l">
        <div>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shipin" />
          </svg>
        </div>
        <span>播放全部(共{{ playnum }}首)</span>
      </div>
      <div class="item-r">+ 收藏({{ collect }})</div>
    </div>

    <div class="song-list-dic">
      <div
        class="song-item"
        v-for="(item,index) in songslist"
        :key="index"
        @click="toplay(item,index)">
        <div class="line-l"><span>{{ index + 1 }}</span></div>
        <div class="line-m">
          <span>{{ item.name }}</span>
          <span>{{item.ar[0].name}} - {{item.al.name}}</span>
        </div>
        <div class="line-r">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-gengduoxiao" />
          </svg>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { getAlbumDetail } from '../../api/singer'
  import { songListIcon } from "../../assets/js/icon";
  import { mapGetters } from "vuex";
  import { formatDate } from '../../common/js/formatDate'

  import TheIcon from '../../components/TheIcon/TheIcon.vue'


  export default {
    components: { 
      TheIcon 
    },

    data() {
      return {
        coverImgUrl:null,
        detailId:'',
        name:'',
        singername:'',
        publictime:'',
        description:'',
        songListIcon:songListIcon,
        playnum:0,
        collect:0,
        songslist:[],
      }
    },

    created(){
      this._getAlbumDetail(this.$route.params.id)
    },

    computed:{
      ...mapGetters(["songsList","id"])
    },

    methods:{
      _getAlbumDetail(id){
        getAlbumDetail(id).then((res) => {
          console.log(res);
          this.coverImgUrl = res.album.blurPicUrl;
          this.name = res.album.name;
          this.singername = res.album.artist.name;
          this.publictime = res.album.publishTime;
          this.description = res.album.description;
          this.playnum = res.songs.length;
          this.songslist = res.songs;
          // this.collect = res.playlist.subscribedCount;
          // // this.songslist = res.playlist.tracks;
          
          // console.log(this.songslist);
        })
      },

      goBack(){
        this.$router.back();
      },

      toplay(item,index){
        console.log(item.id);
        this.$store.commit('setSongsList', this.songslist);
        this.$store.commit('setListIndex',index);
        this.$router.push({path:'/player/' + item.id});
      }
    },

    filters:{
      formatDate(time) {
        let date = new Date(time)
        return formatDate(date, 'yyyy-MM-dd')
      }
    }
  }
</script>

<style scoped>
.song-list{
  z-index: 2;
}
/* 背景 */
.bac-bur {
  position: fixed;
  overflow: hidden;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  height: 300px;
  background-position: center top;
  background-size: 100%;
  background-attachment: fixed;
  filter: blur(30px);
}

.bu-kong {
  position: fixed;
  height: 55px;
  width: 100%;
  overflow: hidden;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-position: center top;
  background-size: 100%;
  background-attachment: fixed;
  filter: blur(10px);
  z-index: 1;
}

/*头部 */
.song-header{
  position: fixed;
  height: 55px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  z-index: 2;
}

/* 歌单信息 */
.song-info{
  padding-top: 60px;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.song-dic {
  display: flex;
  flex-wrap: nowrap;
  flex-grow: 1;
  min-height: 150px;
  width: 100%;
  align-items: center;
  color: white;
  padding: 0 5%;
}

.song-img{
  display: flex;
  justify-content: center;
  width: 40%;
}

.song-img img{
  height: 110px;
}

.info-desc{
  height: 110px;
}

.song-name{
  margin-top: 5px;
  padding: 0 10%;
}

.desc{
  padding-left: 20px;
  display: flex;
  align-items: center;
  margin-top: 20px;
}

.desc img{
  margin-right: 10px;
  width: 25px;
  border-radius: 25px;
}

.desc span{
  color: #dbd6d2;
  font-size: 0.9em;
}

.public-time{
  margin-left: 10px;
  font-size: 0.9em;
}

.description{
  width: 200px;
  margin-left: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.9em;
}

/*  */
.item-top{
  top: 60px;
  position: sticky;
  display: flex;
  width: 100%;
  z-index: 1;
}

.item-l,
.item-r {
  line-height: 60px;
  vertical-align: middle;
  height: 60px;
}

.item-l {
  width: 60%;
  background-color: #fcfdfe;
  border-radius: 20px 0 0 0;
}

.item-l > div {
  display: inline-block;
  width: 30px;
  height: 49px;
  margin-left: 15px;
  vertical-align: middle;
}

.item-l .icon {
  color: black;
}

.item-r {
  width: 40%;
  background-color: #d7463f;
  color: white;
  border-radius: 0 20px 0 0;
  text-align: center;
}

/* 歌单 */
.song-list-dic {
  width: 100%;
  padding-bottom: 60px;
}

.song-item {
  height: 50px;
  width: 100%;
  background-color: white;
  display: flex;
  flex-wrap: nowrap;
  flex-grow: 1;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e3e4e5;
}

.song-item .line-l,
.song-item .line-r {
  width: 50px;
  height: 50px;
  text-align: center;
  color: #a1a2a2;
  line-height: 60px;
}

.song-item .line-m {
  width: 80%;
  height: 50px;
  overflow: hidden;
  font-size: 1em;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.song-item .line-m span:last-child {
  font-size: 0.8em;
  color: #959696;
}

.song-item .icon {
  color: #a1a2a2;
}

.icon {
  color: #ffffff;
}
</style>